<style>
  .el-icon-refresh-left {
    font-size: 15px;

  }

</style>
<template>
  <page-content>
    <space class="my-1">
      <search-form :fields="search"/>
    </space>

    <el-select
      style="margin-left: 20px"
      v-model="value"
      size="small"
      placeholder="请选择分类筛选"
      @change="handleSelect"
    >
      <el-option
        v-for="item in options"
        :key="item.type"
        :label="item.name"
        :value="item.type"
      >
      </el-option>
    </el-select>

    <a-table
      row-key="id"
      :data-source="gameGameDelete"
      bordered
      :scroll="{ x: 600 }"
      :pagination="false"
    >
      <a-table-column title="ID" data-index="id" :width="200"/>
      <a-table-column title="字段名" data-index="name"/>
      <a-table-column title="删除时间" data-index="delete_time" :width="180"/>
      <a-table-column title="操作" :width="100">
        <template #default="record">
          <space>
            <el-button
              type="primary"
              icon="el-icon-refresh-left"
              title="恢复"
              size="mini"
              @click="recover(record.id)"
            />
            <!--            <router-link :to="`/game/gameDeletes/${record.id}/edit`">编辑</router-link>-->
            <!--            <lz-popconfirm :confirm="destroyGameGameDelete(record.id)">-->
            <!--              <a class="error-color" href="javascript:void(0);">删除</a>-->
            <!--            </lz-popconfirm>-->
          </space>
        </template>
      </a-table-column>
    </a-table>
    <lz-pagination :page="page"/>
  </page-content>
</template>

<script>
  import LzPagination from '@c/LzPagination'
  import LzPopconfirm from '@c/LzPopconfirm'
  import PageContent from '@c/PageContent'
  import SearchForm from '@c/SearchForm'
  import Space from '@c/Space'
  import {
    destroyGameGameDelete,
    getGameGameDeletes,
    updateGameGameDelete,
  } from '@/api/game/gameDeletes'
  import {removeWhile} from '@/libs/utils'

  export default {
    name: 'Index',
    scroll: true,
    components: {
      LzPopconfirm,
      PageContent,
      LzPagination,
      Space,
      SearchForm,
    },
    data() {
      return {
        search: [
          {
            field: 'id',
            label: 'ID',
          },
          {
            field: 'field_name',
            label: '字段名',
          },
        ],
        gameGameDelete: [],
        page: null,
        options: [
          {
            type: 1,
            name: '游戏列表'
          },
          {
            type: 2,
            name: '游戏分组'
          },
          {
            type: 3,
            name: '游戏分类'
          }
        ],
        value:1,
      }
    },
    methods: {
      destroyGameGameDelete(id) {
        return async () => {
          await destroyGameGameDelete(id)
          this.gameGameDelete = removeWhile(this.gameGameDelete, (i) => i.id === id)
        }
      },
      recover(id) {

        updateGameGameDelete(id, {is_delete: 2,gameType:this.value}).then((response) => {
          if (response.status = 201) {
            this.$message.success(response.data);
            this.gameGameDelete = removeWhile(this.gameGameDelete, (i) => i.id === id)
          } else {
            this.$message.success(response.data);
          }

        }).catch((error) => {
          this.$message.error('请求失败');
        })
      },
      handleSelect(){
            this.$route.query.gameType=this.value
          this.handle(this.$route);

      },
     async handle(newVal){
        const {data: {data, meta}} = await getGameGameDeletes(newVal.query)

        this.gameGameDelete = data
        this.page = meta

      }
    },



    watch: {
      $route: {
        async handler(newVal) {
         this.handle(newVal)
          this.$scrollResolve()
        },
        immediate: true,
      },
    },
  }
</script>
